<template>
	<view class="content">
		<u-empty v-if="interestList.length <= 0" mode="list" width="50%" textSize="30"
			icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<view class="box" v-for="(item,index) in interestList" :key="index">
			<view class="box-top">
				<view class="top" >
					<image
						:src="item.avatar? $u.fileBaseUrl + item.avatar : '../static/images/me/default-avatar-orange.png' "
						mode="aspectFill"></image>
					<view class="top-left">
						<view>{{item.nickname}}</view>
						<view>{{item.updateTime}}</view>
					</view>
				</view>
				<!-- <view class="button" @click="getfocusOrCancelFocusUser(item,index)">
					取消关注
				</view> -->
			</view>
			
		
			
			
			<view class="video"  @click="getDetail(item.id)">
				<!-- <video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
					@error="videoErrorCallback" :object-fit="fill" :danmu-list="danmuList" :show-fullscreen-btn="false"
					enable-danmu :danmu-btn="false" controls></video> -->
				<image
					:src="item.images? $u.fileBaseUrl + item.images.split(',')[0] :'../static/images/index/zwtp.png' "
					mode="widthFix"></image>
			</view>
			<view class="bottom"  @click="getDetail(item.id)">
				<view class="title">
					{{item.title}}
				</view>
				<view class="icon">
					<uni-icons type="chat" size="35" color="#999"></uni-icons>
					<text>{{item.commentNum ?item.commentNum :0}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "interest",
		props: ['interestList'],
		data() {
			return {
				// interestList: [], //关注列表数据
				// interesttotal: 1, //关注列表数据总条数

			};
		},
		methods: {
			getDetail(id) {
				uni.navigateTo({
					url: `/packagesIndex/pages/guideDetails/guideDetails?id=${id}`
				})
			},
			// 关注 取消关注
			async getfocusOrCancelFocusUser(detail,index) {
				uni.showModal({
					content:'确定取消关注吗？',
					success:async res => {
						if(res.confirm){
							let res = await this.$u.api.getfocusOrCancelFocusUser({
								focusId: detail.uid,
								type: detail.isConcern == 1 ? 0 : 1,
							})
							if (res.code == 200) {
								this.$u.toast('取消关注成功')
								this.$props.interestList.splice(index,1)
							}
						}
					}
				})
				
			},
		},
		destroyed() {
			uni.$off('onReachBottom') // 销毁onReachBottom监听
			uni.$off('onPullDownRefresh') // 销毁onPullDownRefresh
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 200rpx 0 10rpx 0;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 92vh;
		padding-bottom: 100rpx;
		box-sizing: border-box;

		.box {
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #EFEFEF;
			padding-bottom: 70rpx;
			padding: 10rpx;
			box-sizing: border-box;
			background: #f6f6f6;
			position: relative;
			border-radius: 20rpx;

			.box-top {
				width: 90%;
				position: absolute;
				top: 50rpx;
				left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top {
					display: flex;
					align-items: center;
					background-color: #fff;
					padding: 6rpx 20rpx 6rpx 6rpx;
					border-radius: 80rpx;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-right: 12rpx;
					}

					.top-left {
						view {
							&:nth-child(1) {
								font-size: 26rpx;
								color: #111;
							}

							&:nth-child(2) {
								font-size: 20rpx;
								color: #999;
							}
						}

					}
				}
				
				.button{
					background-color: #ccc;
					color: #fff;
					font-size: 18rpx;
					padding: 10rpx 15rpx;
					border-radius: 30rpx;
				}
			}


			.video {
				width: 100%;
				margin-top: 20rpx;

				video {
					width: 100%;
					border-radius: 20rpx;
					border: 0;
				}

				image {
					width: 100%;
					height: 400rpx;
					border-radius: 10rpx;
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:20rpx 20rpx 20rpx 0;

				.title {
					width: 100%;
					font-size: 36rpx;
					// 超出一行显示省略号
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.icon {
					float: right;
					color: #999;
					display: flex;
					align-items: center;

					text {
						display: block;
						margin-left: 12rpx;
					}
				}
			}
		}
	}
	
	.header {
		width: 92%;
		position: absolute;
		z-index: 9999;
		top: 30rpx;
		left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	
		.box {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 6rpx 20rpx 6rpx 6rpx;
			border-radius: 80rpx;
	
			.userImg {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 12rpx;
				overflow: hidden;
	
				.img {
					width: 100%;
					height: 100%;
					
				}
			}
			
			
	
			.userInfo {
	
				.name {
					font-size: 26rpx;
					color: #111;
	
				}
	
				.time {
					font-size: 20rpx;
					color: #999;
				}
			}
	
		}
	
	
		.follow,.unfollow {
			display: flex;
			align-items: center;
			justify-content: flex-end;
	
			button {
				background-color: #ccc;
				color: #fff;
				font-size: 18rpx;
				padding: 10rpx 15rpx;
				border-radius: 30rpx;
				
			}
		}
	}
	
</style>